<template>
	<view class="wrap">
		<form  @submit="submit" >
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" 
						placeholder-class="line" 
						placeholder="请填写会员昵称" 
						name="nickname"
						v-model="nickname"
					 />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload ref="uUpload"
						name="avatarurl"
						:fileList="oldAvatarUrl"
						max-count="1"
						:action="action"
						upload-text="上传头像"
						:auto-upload="false" 
						@on-success="uploadsuccess"
						@on-error="uploaderror"
						@on-choose-complete="chooseimg"
						:form-data="formData"
						:header="header"
					></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio 
								v-for="(item, index) in sexlist" :key="index" 
								:name="item.value"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" 
						placeholder-class="line" 
						placeholder="2021-01-24" 
						name="birthday" 
						v-model="birthday"
					/>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input
						disabled
						type="text"
					  	placeholder-class="line" 
					  	placeholder="省市区县、乡镇等" 
					  	name="region" 
					  	v-model="region"
					  />
				</view>
			</view>
			<regionPicker
				:visible.sync="regionVisible"
				mode="region"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				ref="region" 
			></regionPicker>
			<u-picker 
				mode="time" 
				ref="uPicker" 
				v-model="birthdayShow" 
				@confirm="birthdayConfirm"
			/>
			<button form-type="submit" type="warn">保存并使用</button>
			<button  @click.prevent="reset" >重置</button>
		</form>
	</view>	
</template>

<script>
	
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components:{regionPicker},
		data() {
			return {
				id:'',//初始化修改数据id
				// 头像提交服务端地址
				action: this.$baseUrl + `/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl:[],
				// 表单数据(不含头像信息)
				formData:{},
				// 初始化header头
				header:{authorization:uni.getStorageSync('userInfo').token || null},
				oldImg:'',//初始化旧图片
				regionVisible:false,//初始化地区选择器开关
				nickname:'鲁班',//初始化收件人姓名
				region:'北京市市辖区朝阳区',//初始化地区默认值
				birthday:'1992-02-14',
				birthdayShow:false,
				sexlist:[
						{value:1,name:'男'},
						{value:2,name:'女'},
					],
				sex:1,//初始化会员性别
				resetVal:{}
			}
		},
		
		onLoad(){
			this.getuserinfo()
		},
		methods: {
			// 3.重置
			reset(){
				this.id=this.resetVal.id;
				this.oldAvatarUrl=[{url:this.$baseUrl+ this.resetVal.avatarurl}];
				this.nickname=this.resetVal.nickname;
				this.region=this.resetVal.region || '北京市市辖区朝阳区';
				this.birthday=this.resetVal.birthday || '1992-02-14';
				this.sex=this.resetVal.sex;
			},
			// 2.提交
			submit(e){
				console.log(e);
				let {nickname,region,birthday} = e.detail.value;
				let {id,sex} = this;
				console.log(id);
				this.formData = {
					id,sex,nickname,region,birthday
				}
				
				let files = this.$refs.uUpload.lists[0];
				
				console.log(files);
				
				if(files.file){
					this.$nextTick(()=>{
						this.$refs.uUpload.upload();
					})
					// setTimeout(()=>{
					// 	this.$refs.uUpload.upload();
					// },200)
				}else{
					this.$http({
						url:'infoedit',
						method:'post',
						header:{
							"content-type":"application/json",
							"authorization":uni.getStorageSync('userInfo').token || null
						},
						data:{
							id,
							nickname,
							sex,
							region,
							birthday,
						}
					}).then(async res => {
						console.log(res);
						let userInfo = await this.getuserinfo('leave');
						uni.setStorageSync('userInfo',userInfo);
						
						uni.navigateBack({
							delta:1
						})
					})
				}
			},
			// 1.获取会员信息
			async getuserinfo(leave){
				let res = await this.$http({
					url:'getuserinfo',
					header:{
						"content-type":"application/json",
						"authorization":uni.getStorageSync('userInfo').token || null
					},
					data:{
						uid:uni.getStorageSync('userInfo').uid
					}
				})
				console.log(res);
				if(res.data.code == 200){
					if(res.data.list){
						let userInfo = res.data.list[0];
						if(!leave){
							this.id=userInfo.id;
							this.oldAvatarUrl=[{url:this.$baseUrl+ userInfo.avatarurl}];
							this.nickname=userInfo.nickname;
							this.region=userInfo.region || '北京市市辖区朝阳区';
							this.birthday=userInfo.birthday || '1992-02-14';
							this.sex=userInfo.sex;
							this.resetVal = {...userInfo}
						}else{
							userInfo.token = uni.getStorageSync('userInfo').token || null
							console.log('离开页面时的userInfo',userInfo);
							return userInfo;
						}
					}	
				}

			},
			// 选择会员地区
			onConfirm(res){
				console.log(res);
				this.region = res.result;
			},
			// 监听本地选择图片
			chooseimg(lists, name){
				
			},
			// 性别标签切换
			radioGroupChange(e){
				this.sex = e
			},
		
			// 地址默认设置开关
			setDefault(e){
				
			},
		
			// 开始生日选择器
			showBirthdayPicker(){
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e){
				console.log(e);
				this.birthday = e.year + '-' + e.month + '-' + e.day
			},
			
			// 图片上传成功触发
			async uploadsuccess(data, index, lists, name){
				console.log('成功回调',data);
				let userInfo = await this.getuserinfo('leave');
				uni.setStorageSync('userInfo',userInfo);
				uni.navigateBack({
					delta:1
				})
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name){
				console.log('失败回调',res);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>
